import {useState} from 'react'
import {createWorker} from 'tesseract.js'
import {Button} from 'antd'
import './App.css'
import './test'
import Carousel from './test'

function App() {
  const [engLoading, setEngLoading] = useState(false)
  const [cnLoading, setCnLoading] = useState(false)
  const [eng, setEng] = useState('')
  const [cn, setCn] = useState('')

  async function getEngText() {
    setEngLoading(true)
    const worker = await createWorker('eng')
    const ret = await worker.recognize('https://tesseract.projectnaptha.com/img/eng_bw.png')
    console.log(ret.data.text)
    setEng(ret.data.text)
    await worker.terminate()
    setEngLoading(false)
  }

  async function getCnText() {
    setCnLoading(true)
    const worker = await createWorker('chi_sim')
    const ret = await worker.recognize('https://img2.imgtp.com/2024/03/28/phDip4ub.jpg')
    console.log(ret.data.text)
    setCn(ret.data.text)
    await worker.terminate()
    setCnLoading(false)
  }



  return (
    <div className="App">
      {/*<Carousel/>*/}
      <div className="wrapper eng">
        <img src="https://tesseract.projectnaptha.com/img/eng_bw.png" alt="图片"/>
        <Button type="primary" onClick={getEngText} loading={engLoading}>提取英文</Button>
        <div className="result">{eng}</div>
      </div>
      <div className="wrapper cn">
        <img src="https://img2.imgtp.com/2024/03/28/phDip4ub.jpg" alt="图片"/>
        <Button type="primary" onClick={getCnText} loading={cnLoading}>提取中文</Button>
        <div className="result">{cn}</div>
      </div>
    </div>
  );
}

export default App;
